<template>
    <div class="box_huida">
        <div class="item" v-for="item in waitYouList" :key="item.id" @click="goView">
            <div class="top">
                <div class="img"><img :src="item.img" alt=""></div>
                <div class="name">{{ item.name }}</div>
                <div class="time">{{ item.time }}天前 期待你的回答</div>
            </div>
            <div class="middle">
                <div class="title">{{ item.title }}</div>
                <div class="btn">
                    <el-button type="primary" icon="el-icon-edit" @click.stop="goWrite">写回答</el-button>
                </div>
            </div>
            <div class="bottom">
                <span>喜欢{{ item.love }}</span>
                <span>回答{{ item.huida }}</span>
                <span>不感兴趣{{ item.nolove }}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
props:{
    waitYouList:Array
},
methods:{
    goView() {
        this.$router.push('/viewquestion')
    },
    goWrite(){
        this.$router.push('/answer')
    }
}
}
</script>
<style lang="scss" scoped>
.box_huida {
    padding: 20px;
    box-sizing: border-box;
    .item {
        padding: 10px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        .top{
            display: flex;
            align-items: center;
            .img {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .name {
                font-size: 14px;
                margin: 0 10px;
            }
            .time {
                color: #B39999;
            }
        }
        .middle {
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .btn {
                margin-left: 20px;
            }
        }
        .bottom {
            color: #B39999;
        }
        .bottom>span:nth-child(2) {
            margin: 0 10px;
        }
    }
    .item:hover {
        cursor: pointer;
    }
}
</style>